<script>
export default {
	props: {
		percentage: {
			default: 0
		},
		autoAnim: {
			type: Boolean,
			default: false
		}
	},
	mounted() {
		// console.log(this.autoAnim)
	},
	computed: {
		leftRotate() {
			if (this.percentage >= 50) {
				let per = parseInt(this.percentage)*3.6-315
				return {
					transform: `rotate(${per}deg)`
				}
			}
		},
		rightRotate () {
			if (!this.autoAnim) {
				if (this.percentage <= 50) {
					let per = parseInt(this.percentage)*3.6-225
					return {
						transform: `rotate(${per}deg)`
					}
				} else if (this.percentage > 50){
					return {
						transform: `rotate(-45deg)`
					}
				}
			}
		}
	}
}
</script>

<template lang="pug">
.comp-progress.c_bg_f
	.comp-wrapper.left
		.comp-inner.anim-left(:style="leftRotate")
	.comp-wrapper.right
		.comp-inner.anim-right(:style="rightRotate")
</template>

<style lang="stylus">
.comp-progress
	position relative
	width 50px
	height 50px
	.comp-wrapper
		position absolute
		top 0
		width 50%
		height 100%
		overflow hidden
		&.left
			left 0
		&.right
			right 0
		>.comp-inner
			width 30px
			height 30px
			border 10px solid transparent
			border-radius 50%
			position absolute
			top 0
			transition all .3s linear
			&.anim-left
				transform rotate(-135deg)
				border-bottom 10px solid green
				border-left 10px solid green
				animation progress_rotate_left 3s linear infinite
				left 0
			&.anim-right
				transform rotate(-225deg)
				border-bottom 10px solid green
				border-right 10px solid green
				animation progress_rotate_right 3s linear infinite
				right 0
@keyframes progress_rotate_right {
	0% {
		transform rotate(-45deg)
	}
	50%, 100% {
		transform rotate(135deg)
	}
}
@keyframes progress_rotate_left {
	0%, 50% {
		transform rotate(-135deg)
	}
	100% {
		transform rotate(45deg)
	}
}
</style>
